<!--首页-->
<template>
  <div class="line64"  v-if="show">
    <article>
      <div class="pics">
        <ul>
          <li v-for="(item,index) in topData" :key="index"><i><a href="#" @click="topicInfo(item.id)"><img
            :src="getImg(item.img)"></a></i><span>{{ item.title }}</span></li>
        </ul>
      </div>
      <div class="blank"></div>
      <div class="leftbox">
        <Recommend :recommend="recommend"></Recommend>
        <NewArticle ></NewArticle>
      </div>
      <div class="rightbox">


<!--        这里是标签云-->
        <div class="labelcloud">
          <h2 class="ab_title"><a href="/">标签云</a></h2>
          <ul class="typeTitle">
            <li v-for="(item) in typeTitle" :key="item.id">
              <el-button  :type="item.color">{{item.name}}</el-button>
            </li>
          </ul>

        </div>
        <div class="blank"></div>



<!--        这里是搜索框-->
        <div class="search">
          <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
            <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字'}" type="text">
            <input name="show" value="title" type="hidden">
            <input name="tempid" value="1" type="hidden">
            <input name="tbname" value="news" type="hidden">
            <input name="Submit" class="input_submit" value="搜索" type="submit">
          </form>
        </div>


<!--        这里是点击排行榜-->
        <div class="paihang">
          <h2 class="ab_title"><a href="/">点击排行</a></h2>
          <ul>
            <li v-for="(item,index) in rankingList" :key="index">
              <b>
              <a href="#" @click="topicInfo(item.id)">{{item.title}}</a>
              </b>
              <p class="pcontent" style="-webkit-box-orient: vertical;">
                <i><img :src="getImg(item.img)"></i>
                {{item.content}}
              </p>
            </li>
          </ul>
        </div>


<!--        这里是友情链接-->
        <div class="links">
          <h2 class="ab_title">友情链接</h2>
          <ul>
            <li><a href="/">杨青个人博客</a></li>
            <li><a href="/">个人博客模板</a></li>
            <li><a href="/">优秀个人博客</a></li>
          </ul>
        </div>
<!--        关于我-->
        <div class="aboutme">
          <h2 class="ab_title">关于我</h2>
          <div class="avatar"><img src="images/b04.jpg" /></div>
          <div class="ab_con">
            <p>网名：DanceSmile | 即步非烟</p>
            <p>职业：Web前端设计师、网页设计 </p>
            <p>籍贯：四川省—成都市</p>
            <p>邮箱：dancesmiling@qq.com</p>
        </div>
      </div>
      </div>
    </article>
  </div>
</template>

<script>

import Recommend from "./common/Recommend";
import NewArticle from "./common/NewArticle";

export default {

  name: "Index",
  components: {NewArticle, Recommend},
    mounted() {
        this.initData();
    },
    data() {
    return {
      topData: [],
      recommend: [],
      typeTitle:[],
      rankingList: [],
        show:false
    }
  },

  async  beforeCreate() {
    await (()=>{
        this.$axios.post("/api/getRecommend").then(res=>{
            for (let i = 0; i <res.data.records.length; i++) {
                if (i <= 2){
                    this.topData.push(res.data.records[i]);
                }else {
                    this.recommend.push(res.data.records[i]);
                }
            }
        }).catch(reason => {});
        this.$axios.post("/api/getClickList").then(res=>{
            this.rankingList = res.data.records;
        }).catch(reason => {});
    })();
    this.show = true;
    },
    methods:{
      initData(){
          this.$axios.post("/api/label").then(res => {
                if (res.status === 200){
                    this.typeTitle = res.data;
                }
          }).catch(res => {
          });
      },
        topicInfo(blogId){
            let routeData = this.$router.resolve({ path: `/common/TopicInfo`,query:{id:blogId}});
            window.open(routeData.href, '_blank');
        },
        getImg(img){
            return process.env.IMG_URL + "/img/"+img;
        }
    }
}
</script>

<style scoped>

.typeTitle{
  list-style: none;
  margin-left: 28px;
  margin-bottom: 28px;
}
.typeTitle li{
  list-style: none;
  display: inline-block;
  margin: 10px 8px 0 0;

}
.pcontent{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

</style>
